<template>
   <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{selected:flag===1}"  href="#/" @click="$emit('changeflag',1)">全部任务</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:flag === 2}" @click="$emit('changeflag',2)">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:flag === 3}" @click="$emit('changeflag',3)">已完成</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('clear')">清除已完成</button>
    </footer>
</template>

<script>
export default {
props: {
  list:Array,
  flag:Number
},
computed: {
  shengyu(){
   return this.list.filter(item=>{
    return item.isDone === false
  }).length
  }
 
}
}
</script>

<style>

</style>